<template>
  <div :key="pageRenderKey" style="width: 100%">
    <van-loading v-if="isFetching" color="#409EFF"></van-loading>
    <van-form v-else ref="refClerkForm" :label-width="100" style="width: 100%">
      <van-field
        v-model="clerk.cname"
        label="姓名"
        name="cname"
        :rules="rules.cname"
        placeholder="请输入姓名"></van-field>
      <van-field label="性别" name="sex" :rules="rules.sex">
        <template #input>
          <van-radio-group v-model="clerk.sex" direction="horizontal" class="radio_list">
            <van-radio v-for="item in genderList" :name="item.id">
              {{ item.name }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field v-if="EditMode.m === EditMode.EditClerk" label="运营状态" name="dengji">
        <template #input>
          <van-radio-group v-model="clerk.dengji" direction="horizontal" class="radio_list">
            <van-radio v-for="item in dengjiList" :name="item.id">
              {{ item.name }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- 先注释, 不删除, 说不定隔 2 天又要加回来 -->
      <!-- <van-field label="需求大小" name="demandLevel">
        <template #input>
          <van-radio-group v-model="clerk.demandLevel" direction="horizontal" class="radio_list">
            <van-radio v-for="item in demandLevelList" :name="item.id">
              {{ item.name }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field> -->
      <van-field
        v-if="EditMode.m === EditMode.EditClerk"
        v-model="clerk.ccode"
        label="顾客编号"
        name="ccode"
        readonly></van-field>
      <van-field
        v-model="clerk.solar"
        label="生日(阳历)"
        name="solar"
        :rules="rules.solar"
        readonly
        placeholder="请选择生日">
        <template #button>
          <van-button plain hairline size="small" type="info" @click.stop="handelBdayPickerOpen">选择</van-button>
        </template>
      </van-field>
      <van-field v-model="clerk.lunar" label="生日(阴历)" name="lunar" :rules="rules.lunar" readonly></van-field>
      <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center">
        <van-field
          v-model="clerk.btime"
          label="出生时间"
          name="btime"
          readonly
          clickable
          placeholder="选择出生时间"
          @click="pop.showBtimePicker = true"></van-field>
        <van-dropdown-menu active-color="#1989fa" style="width: 100px; height: 44px; margin: 0 0">
          <van-dropdown-item v-model="clerk.btime" :options="btimeOptions"></van-dropdown-item>
        </van-dropdown-menu>
      </div>
      <van-field label="生日类别" name="birthdayType" :rules="rules.birthdayType">
        <template #input>
          <van-radio-group v-model="clerk.birthdayType" direction="horizontal" class="radio_list">
            <van-radio v-for="item in birthdayTypeList" :name="item.id">
              {{ item.name }}
            </van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field label="上传主图" name="pic" :rules="rules.pic">
        <template #input>
          <van-uploader
            v-model="imgUpld.mainPicList"
            :max-count="1"
            style="margin: 0"
            preview-size="170"
            accept="image/png, image/jpeg, image/jpg"
            :before-read="file => handleFileBeforeUpload(file, undefined)"
            :after-read="file => handleImgMainUpload(file, undefined)"></van-uploader>
        </template>
      </van-field>
      <van-field label="上传辅图">
        <template #input>
          <van-uploader
            v-model="imgUpld.subPicList"
            :max-count="3"
            style="margin: 0"
            preview-size="51"
            accept="image/png, image/jpeg, image/jpg"
            :before-read="file => handleFileBeforeUpload(file, undefined)"
            :after-read="file => handleImgSubUpload(file, undefined)"
            :before-delete="(file, detail) => handleImgSubRemove(file, detail)"></van-uploader>
        </template>
      </van-field>
      <van-field v-model="clerk.city" label="出生城市" name="city"></van-field>
      <van-field v-model="clerk.address" label="住址" name="address"></van-field>
      <van-field v-model="clerk.tel" label="联系方式" name="tel" placeholder="顾客的电话或微信号"></van-field>
      <!-- <van-field v-model="clerk.demand" label="需求主诉" name="demand" placeholder="顾客的需求主诉"></van-field> -->
    </van-form>

    <!-- 选择生日 -->
    <van-popup
      v-model="pop.showBdayPicker"
      position="bottom"
      close-icon-position="top-left"
      :style="{ height: '85%' }"
      :overlay="true"
      :lock-scroll="false"
      @click-close-icon="handleBdayPickerCancel">
      <div class="foot_inpt_date">
        <div>
          <van-field
            v-model="calendarPage.inputYear"
            input-align="right"
            placeholder="阿拉伯"
            style="width: 110px"
            size="small"
            @input="() => (calendarPage.jmpLeepMonth = false)">
            <template slot="extra">
              <span style="color: #999; font-size: 14px; font-weight: bold; margin-left: 5px">年</span>
            </template>
          </van-field>
        </div>
        <div>
          <van-field
            v-model="calendarPage.inputMonth"
            input-align="right"
            placeholder="数字"
            style="width: 90px"
            size="small"
            @input="gotoInputDate(0)">
            <template slot="extra">
              <span style="color: #999; font-size: 14px; font-weight: bold; margin-left: 5px">月</span>
            </template>
          </van-field>
        </div>
        <van-radio-group v-model="clerk.birthdayType" direction="horizontal" size="small" @input="gotoInputDate(0)">
          <van-radio :name="1">公历</van-radio>
          <van-radio :name="2">农历</van-radio>
        </van-radio-group>
      </div>
      <div class="foot_inpt_date">
        <div style="margin: 0 0 0 5px; padding-top: 5px">
          <van-checkbox
            v-model="calendarPage.jmpLeepMonth"
            shape="square"
            :disabled="!calendarPage.showLeepMonth"
            @change="gotoInputDate(1)">
            闰月
          </van-checkbox>
        </div>
        <div style="margin: 0 0 0 5px">
          <van-button
            type="info"
            size="small"
            plain
            style="width: 80px"
            @click.stop="() => (pop.showBdayPicker = false)">
            确定
          </van-button>
        </div>
      </div>
      <van-divider></van-divider>
      <div style="display: block; position: relative">
        <vue-hash-calendar
          ref="refCalendar"
          model="inline"
          picker-type="date"
          :visible.sync="pop.showBdayPicker"
          :format="'YY/MM/DD'"
          :min-date="new Date('1900/01/01')"
          :max-date="new Date()"
          :default-datetime="calendarPage.selectedDate"
          :is-show-arrow="false"
          :is-show-week-view="false"
          :show-today-button="false"
          :is-show-not-current-month-day="false"
          :is-auto-change-month="false"
          :change-year-fast="true"
          :theme-color="calCalendarTheme"
          @change="handleBdayChange">
          <div slot="day" slot-scope="scope">
            <div class="lunar-content" @click.stop="handleClickCalDate(scope.date)">
              <div>{{ scope.date.day }}</div>
              <div class="lunar">{{ showLunar(scope.date, scope.extendAttr) }}</div>
            </div>
          </div>
        </vue-hash-calendar>
        <div class="pick_birthday_title">农历: {{ calendarPage.lunarTitle }}</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// 引入后端 API
import * as apiSts from '@/api/_com_';
import { getSalon, upload } from '@/api/txs';
// 引入自定义组件
import WebConst from '@/utils/const/web-const';
import '@/utils/datefmt';
import { lunar } from '@/utils/lunar';
// 引入第三方组件
import Compressor from 'compressorjs';
import {
  Notify,
  Button as VanButton,
  Checkbox as VanCheckbox,
  Divider as VanDivider,
  DropdownItem as VanDropdownItem,
  DropdownMenu as VanDropdownMenu,
  Field as VanField,
  Form as VanForm,
  Loading as VanLoading,
  Popup as VanPopup,
  Radio as VanRadio,
  RadioGroup as VanRadioGroup,
  Uploader as VanUploader,
} from 'vant';
import 'vant/lib/button/style';
import 'vant/lib/checkbox/style';
import 'vant/lib/divider/style';
import 'vant/lib/dropdown-item/style';
import 'vant/lib/dropdown-menu/style';
import 'vant/lib/field/style';
import 'vant/lib/form/style';
import 'vant/lib/loading/style';
import 'vant/lib/popup/style';
import 'vant/lib/radio-group/style';
import 'vant/lib/radio/style';
import 'vant/lib/uploader/style';
import { mapGetters } from 'vuex';

const EditMode = { m: 1, AddNewClerk: 1, EditClerk: 2 };

export default {
  name: 'ClerkInfo',
  components: {
    VanForm,
    VanField,
    VanRadioGroup,
    VanRadio,
    VanDivider,
    VanButton,
    VanUploader,
    VanCheckbox,
    VanLoading,
    VanPopup,
    VanDropdownMenu,
    VanDropdownItem,
  },
  props: {
    mode /* 1-新增; 2-编辑 */: {
      type: Number,
      required: true,
    },
    cdata /* 编辑模式下传入顾客数据 */: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      pageRenderKey: 1,
      pop: { showBtimePicker: false, showBdayPicker: false },
      calCalendarTheme: {
        'main-color': '#766AFF', // 主题颜色, 如选中日期背景颜色
        'bg-color': '#ECEBFF', // 背景颜色, 如右上角空白部分的颜色
        'main-font-color': '#766AFF', // 前景颜色, 如左上角文字颜色
        'vice-font-color': '#999999', // 星期栏文字颜色
      },
      isFetching: false,
      clerkAddDefault: {
        birthdayType: 1,
        demandLevel: 0,
        dengji: 0,
        btime: '',
      },
      clerk: this.cdata,
      clerkForm: {},
      rules: {
        cname: [{ required: true, message: '必填项', trigger: 'onBlur' }],
        sex: [{ required: true, message: '请选择性别', trigger: 'onBlur' }],
        kid: [{ required: true, message: '请选择管家', trigger: 'onBlur' }],
        pic: [{ required: true, message: '请上传主图', trigger: 'onBlur' }],
        solar: [{ required: true, message: '请选择生日', trigger: 'onBlur' }],
        lunar: [{ required: true, message: '请选择生日', trigger: 'onBlur' }],
        dengji: [{ required: true, message: '请选择运营状态', trigger: 'onBlur' }],
        birthdayType: [{ required: true, message: '请选择生日类别', trigger: 'onBlur' }],
      },
      btimeOptions: [
        { text: '未知', value: '' },
        { text: '23--01', value: '23:00' },
        { text: '01--03', value: '01:00' },
        { text: '03--05', value: '03:00' },
        { text: '05--07', value: '05:00' },
        { text: '07--09', value: '07:00' },
        { text: '09--11', value: '09:00' },
        { text: '11--13', value: '11:00' },
        { text: '13--15', value: '13:00' },
        { text: '15--17', value: '15:00' },
        { text: '17--19', value: '17:00' },
        { text: '19--21', value: '19:00' },
        { text: '21--23', value: '21:00' },
      ],
      // btimeOptions: [
      //   { text: '时间未知', value: '' },
      //   { text: '23--01【子时】夜半', value: '23' },
      //   { text: '01--03【丑时】鸡鸣', value: '01' },
      //   { text: '03--05【寅时】平旦', value: '03' },
      //   { text: '05--07【卯时】日出', value: '05' },
      //   { text: '07--09【辰时】食时', value: '07' },
      //   { text: '09--11【巳时】隅中', value: '09' },
      //   { text: '11--13【午时】日中', value: '11' },
      //   { text: '13--15【未时】日昳', value: '13' },
      //   { text: '15--17【申时】哺时', value: '15' },
      //   { text: '17--19【酉时】日入', value: '17' },
      //   { text: '19--21【戌时】黄昏', value: '19' },
      //   { text: '21--23【亥时】人定', value: '21' }
      // ],
      dengjiList: [],
      demandLevelList: [],
      salonList: [],
      genderList: [],
      birthdayTypeList: [],
      EditMode: EditMode,
      imgUpld: {
        mainPicList: [], // { url:'', status:'', message:'', isImage:true, saveName:'' }
        subPicList: [], // { url:'', status:'', message:'', isImage:true, saveName:'' }
      },
      calendarPage: {
        showCalendar: false,
        showLeepMonth: false,
        selectedDate: new Date(), // 已选中的顾客生日
        inputYear: '',
        inputMonth: '',
        isJumping: false,
        jmpLeepMonth: false,
        lunarTitle: '',
        curMonth: undefined, // 用于更新阴历标题
      },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  created() {
    this.EditMode.m = this.mode;

    this.dengjiList.push({ id: 0, name: '正常' });
    this.dengjiList.push({ id: 1, name: '预警' });
    this.dengjiList.push({ id: 2, name: '失速' });
    this.dengjiList.push({ id: 3, name: '放弃' });

    this.demandLevelList.push({ id: 1, name: '小' });
    this.demandLevelList.push({ id: 2, name: '中' });
    this.demandLevelList.push({ id: 3, name: '大' });

    this.genderList.push({ id: 0, name: '男' });
    this.genderList.push({ id: 1, name: '女' });

    this.birthdayTypeList.push({ id: 1, name: '公历' });
    this.birthdayTypeList.push({ id: 2, name: '农历' });
  },
  mounted() {
    this.prepareData();
    if (this.EditMode.m == EditMode.EditClerk) {
      this.initEditClerk();
    } else {
      this.$refs.refClerkForm.resetValidation();
      this.clerk = Object.assign({}, this.clerkAddDefault);
    }
  },
  methods: {
    prepareData: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      try {
        this.loadSalon();
      } catch (err) {
      } finally {
        this.isFetching = false;
      }
    },
    handleBdayChange(dtStr /* 选中的日期 格式为 format 属性指定的格式 */) {
      const tmpDate = new Date(dtStr);
      this.updateCalTitle(tmpDate);
    },
    handelBdayPickerOpen: async function () {
      this.pop.showBdayPicker = true;
    },
    handleBdayPickerCancel: async function () {
      this.pop.showBdayPicker = false;
    },
    handleBdayPickerConfirm: async function (val) {
      this.clerk.solar = val;
      this.pop.showBdayPicker = false;
    },
    initEditClerk: function () {
      if (this.clerk.pic) {
        this.imgUpld.mainPicList.splice(0, this.imgUpld.mainPicList.length);
        this.imgUpld.mainPicList.push({
          url: WebConst.clerkImageStaticUrl2Uri(this.clerk.pic),
          status: 'done',
          isImage: true,
          saveName: WebConst.getImageFilename(this.clerk.pic),
        });
      }
      this.imgUpld.subPicList.splice(0, this.imgUpld.subPicList.length);
      if (this.clerk.images) {
        this.clerk.images
          .split(';')
          .map(x => x.trim())
          .filter(x => !!x)
          .forEach(x => {
            this.imgUpld.subPicList.push({
              url: WebConst.getClerkImageUriByName(x),
              sstatus: 'done',
              isImage: true,
            });
          });
      }
      this.pageRenderKey += 1;
    },
    showLunar(date /* {"year":2024,"month":11,"day":24,"hours":11,"minutes":39} */, extendAttr) {
      if (!date || !date.day) {
        return;
      }
      const lunarObj = lunar.solar2lunar(date.year, date.month + 1, date.day);
      return lunarObj.IDayCn;
    },
    updateCalTitle: async function (date) {
      const curMonth = `${date.getFullYear()}${date.getMonth()}`;
      this.calendarPage.curMonth = curMonth;
      const lunarObj = lunar.solar2lunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
      const lunarTitle = `${lunarObj.lYear} 年 ${lunarObj.IMonthCn}`;
      this.calendarPage.lunarTitle = lunarTitle;
    },
    handleClickCalDate: async function (date) {
      if (!date || !date.day) {
        return;
      }
      const inDate = new Date(date.year, date.month, date.day);
      const errAlertMsg = '只能选择今天之前的日期';
      const now = new Date();
      if (now.getTime() <= inDate.getTime()) {
        Notify({ type: 'danger', message: errAlertMsg });
        return;
      }
      if (now.getFullYear() == inDate.getFullYear() && now.getDate() == inDate.getDate()) {
        Notify({ type: 'danger', message: errAlertMsg });
        return;
      }
      this.calendarPage.selectedDate = inDate;
      const lunarObj = lunar.solar2lunar(inDate.getFullYear(), inDate.getMonth() + 1, inDate.getDate());
      // console.log('lunarObj', lunarObj);
      const clerkSolarBirthday = `${lunarObj.cYear}年${lunarObj.cMonth}月${lunarObj.cDay}日`;
      const clerkLunarDirthday = `${lunarObj.gzYear}年${lunarObj.IMonthCn}${lunarObj.IDayCn}`;
      this.clerk.solar = clerkSolarBirthday;
      this.clerk.lunar = clerkLunarDirthday;
      this.clerk.gzn = lunarObj.gzYear;
      this.clerk.gzy = lunarObj.gzMonth;
      this.clerk.gzr = lunarObj.gzDay;
    },
    gotoInputDate: async function (toggleLeapMonth) {
      if (this.calendarPage.isJumping) {
        return;
      }
      const inptYear = this.calendarPage.inputYear.trim();
      const inptMonth = this.calendarPage.inputMonth.trim();
      if (!inptYear || !inptMonth) {
        return;
      }
      const now = new Date();
      try {
        const year = Number.parseInt(inptYear);
        if (year < 1900 || year > now.getFullYear()) {
          throw year;
        }
      } catch (err) {
        Notify({ type: 'danger', message: '请输入正确的年份' });
        return;
      }
      try {
        const month = Number.parseInt(inptMonth);
        if (month < 1 || month > 12 || (inptYear == now.getFullYear() && month > now.getMonth() + 1)) {
          throw month;
        }
      } catch (err) {
        Notify({ type: 'danger', message: '请输入正确的月份' });
        return;
      }
      let inptDate = `${inptYear}/${inptMonth}/1`;
      if (this.clerk.birthdayType == 2) {
        const leepM = lunar.leapMonth(inptYear);
        if (leepM == inptMonth) {
          this.calendarPage.showLeepMonth = true;
        } else {
          this.calendarPage.showLeepMonth = false;
        }
        const lunarObj = lunar.lunar2solar(inptYear, inptMonth, 1, this.calendarPage.jmpLeepMonth);
        inptDate = `${lunarObj.cYear}/${lunarObj.cMonth}/${lunarObj.cDay}`;
        this.calendarPage.lunarTitle = `${lunarObj.lYear} 年 ${lunarObj.IMonthCn}`;
      }
      // jump
      this.calendarPage.selectedDate = new Date(inptDate);
    },
    loadSalon: async function () {
      let sid = this.openId;
      if (!sid) {
        sid = 0;
      }
      const errAlertMsg = '查询门店信息失败';
      this.salonList.splice(0, this.salonList.length);
      await getSalon(sid)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.salonList.push(ret);
            this.clerk.sid = ret.id;
          }
        })
        .catch(err => {
          console.log('getSalon', err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
    handleFileBeforeUpload(file) {
      const allowFileTypes = ['jpg', 'jpeg', 'png'];
      const fileType = file.name.split('.').pop().toLowerCase();
      if (allowFileTypes.indexOf(fileType) === -1) {
        Notify({ type: 'danger', message: '只能上传 jpg,jpeg,png 图片!' });
        return false;
      }
      if (file.size > 1024 * 500) {
        return new Promise(resolve => {
          new Compressor(file, {
            quality: 0.8,
            maxWidth: 1000,
            maxHeight: 1000,
            convertSize: 500000,
            success(result) {
              const file1 = new File([result], file.name, { type: file.type });
              resolve(file1);
            },
            error(err) {
              console.log(err.message);
            },
          });
        });
      }
      return true;
    },
    handleImgMainUpload: async function (options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('file', file);
      if (this.EditMode.m === EditMode.EditClerk) {
        formData.append('id', this.clerk.id);
      }
      const errAlertMsg = '主图上传失败';
      options.status = 'uploading';
      options.message = '上传中...';
      await upload(formData)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          const ret = res.data.data;
          this.clerk.pic = ret; // TODO 保存在数据库中的暂时不改
          options.status = 'done';
          options.url = ret;
          options.saveName = WebConst.getImageFilename(ret);
        })
        .catch(err => {
          console.log('handleImgMainUpload', err);
          options.status = 'failed';
          options.message = '上传失败';
        });
    },
    handleImgSubUpload: async function (options) {
      const file = options.file;
      const formData = new FormData();
      formData.append('file', file);
      if (this.EditMode.m === EditMode.EditClerk) {
        formData.append('id', this.clerk.id);
      }
      const errAlertMsg = '辅图上传失败';
      options.status = 'uploading';
      options.message = '传...';
      await upload(formData)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          const ret = res.data.data;
          // 辅图保存在 images 字段中, 只保存文件名; 多个文件名之间, 用英文逗号分隔
          const uri = WebConst.clerkImageStaticUrl2Uri(ret);
          options.status = 'done';
          options.url = uri;
          options.saveName = WebConst.getImageFilename(ret);
        })
        .catch(err => {
          console.log('handleImgMainUpload', err);
          options.status = 'failed';
          options.message = '失败';
        });
    },
    handleImgSubRemove: async function (file, detail) {
      console.log('handleImgSubRemove', file, detail);
      if (file && file.status == 'done' && file.saveName) {
        const rmIdx = this.imgUpld.subPicList.findIndex(x => x.saveName === file.saveName);
        if (rmIdx !== -1) {
          this.imgUpld.subPicList.splice(rmIdx, 1);
        }
      }
    },
    /**
     * 本方法只返回基础信息页面可以编辑的信息
     * @return {Object | undefined} undefined 表示基础信息没有完善
     */
    getClerkBaseInfo: async function () {
      let ok = false;
      const validateClerkForm = this.$refs.refClerkForm.validate();
      await validateClerkForm
        .then(() => {
          ok = true;
        })
        .catch(err => {
          console.log(err.errorFields);
          ok = false;
        });
      if (!ok) {
        return;
      }
      const cpy = {};
      // 这里的属性拷贝, 最好和UI的顺序一致, 方便查漏补缺
      cpy.sid = this.clerk.sid;
      cpy.kid = this.id; // 管家 ID
      cpy.cname = this.clerk.cname;
      cpy.sex = this.clerk.sex;
      cpy.dengji = this.clerk.dengji;
      cpy.demandLevel = this.clerk.demandLevel;
      cpy.ccode = this.clerk.ccode;
      cpy.solar = this.clerk.solar;
      cpy.lunar = this.clerk.lunar;
      cpy.gzn = this.clerk.gzn; // 干支: 年, 选生日的时候赋值
      cpy.gzy = this.clerk.gzy; // 干支: 月, 选生日的时候赋值
      cpy.gzr = this.clerk.gzr; // 干支: 日, 选生日的时候赋值
      cpy.btime = this.clerk.btime;
      cpy.birthdayType = this.clerk.birthdayType;
      cpy.city = this.clerk.city;
      cpy.address = this.clerk.address;
      cpy.tel = this.clerk.tel;
      cpy.demand = this.clerk.demand;
      cpy.pic = this.clerk.pic; // 主图
      cpy.images = null; // 辅图
      // 其他根据 UI 填写数据, 计算出来的属性
      if (this.imgUpld.subPicList && this.imgUpld.subPicList.length > 0) {
        const subImageNames = this.imgUpld.subPicList.map(x => x.saveName).filter(x => !!x);
        if (subImageNames && subImageNames.length > 0) {
          cpy.images = subImageNames.join(';'); // 和后端约定的规则
        }
      }
      cpy.kname = this.name;
      if (this.EditMode.m === EditMode.AddNewClerk) {
        const salon = this.salonList.find(x => x.id === cpy.sid);
        if (salon) {
          cpy.sname = salon.sname;
          cpy.ccode = salon.code + '-c'; // 只有新增的顾客, 需要这写(老代码的逻辑)
        }
      }
      return cpy;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .radio_list {
  width: 100%;
  height: auto;
  padding: 0 3px 0 0;
}

::v-deep .van-dropdown-item--down {
  padding: 0 35px;
  text-align: right;
}

::v-deep .van-dropdown-item--down .van-overlay {
  width: 89vw;
  margin: 0 35px;
}

::v-deep .van-dropdown-item__content {
  width: 60vw;
  padding: 0 10px;
  position: relative;
  top: 0;
  right: 10px;
  transform: translateX(50%);
}

::v-deep .van-dropdown-item__option {
  text-align: center;
}

::v-deep .van-dropdown-item__option--active {
  background-color: #f7f7f7;
}

::v-deep .van-dropdown-item__option--active .van-cell__title:nth-of-type(1) {
  text-align: right;
}

::v-deep .van-dropdown-item__option--active .van-cell__value:nth-of-type(2) {
  text-align: left;
  padding: 0 0 0 20px;
}

.foot_inpt_date {
  padding: 15px 20px 1px 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pick_birthday_title {
  width: 3.96667rem;
  height: 80px;
  text-align: center;
  color: #3f3946;
  font-size: 30px;
  font-weight: 500;
  position: absolute;
  top: 32px;
  left: 50%;
  z-index: 100;
  transform: translateX(-30%);
}

.lunar-content {
  width: 100%;
  padding: 0 0;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0px;

  .lunar {
    width: 100%;
    text-align: center;
    font-size: 22px;
    transform: scale(0.8);
  }
}
</style>
